import styled from 'styled-components'
import * as vars from './style/variables'

export const AppWrapper = styled.div`
  .tips {
    color: ${vars.primaryColor};
    cursor: pointer;
    margin: 10px 0;
    &:hover {
      color: green;
    }
  }
`

// h2子元素
export const H2Wrapper = styled.h2`
 color: gray;
 font-weight: bold;
`

// user-item子元素
export const UserItemWrapper = styled.div.attrs(props => {
  return {
    tColor: props.secondColor || 'blue'
  }
})`
  border: 1px solid #ddd;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  cursor: pointer;
  &:hover {
    border-color: blue;
  }
  .user-item {
    &__left {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 10px 0 0 10px;
      .user-item-name {
        font-size: ${props => props.fontSize || vars.fontSize}px;
        font-weight: bold;
        color: ${props => props.color || vars.primaryColor};
      }
      .user-item-desc {
        font-size: 16px;
        color: ${vars.secondColor};
        line-height: 1.5;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
      }
    }
    &__right {
      flex-shrink: 0;
      padding: 10px 10px 0 0;
      .user-item-avatar {
        width: 120px;
        height: 150px;
        border: 1px solid #ddd;
      }
    }
    &-action {
      width: 100%;
      display: flex;
      height: 40px;
      border-top: 1px solid #ddd;
      .user-item-action-item {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .user-item-action-item:last-child {
        border-left: 1px solid #ddd;
      }
    }
  }
`

// footer子元素
export const FooterWrapper = styled.div`
  border: 1px solid red;
  margin-top: 10px;
  .footer {
    &-links {
      color: blue;
    }
    &-copyright {
      color: #999;
    }
  }
`


export const ICButton = styled.button`
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
`
export const ICPrimaryButton = styled(ICButton)`
  --color: #409eff;
  background: var(--color);
  color: #fff;
  border: 1px solid var(--color);
`
export const ICDangerButton = styled(ICButton)`
  --color: #f56c6c;
  background: var(--color);
  color: #fff;
  border: 1px solid var(--color);
`
export const ICSuccessButton = styled(ICButton)`
  --color: #67c23a;
  background: var(--color);
  color: #fff;
  border: 1px solid var(--color);
`